import React, { Component } from 'react'
import { connect } from 'dva';
import { Table } from 'antd';
import SearchFireRoom from './SearchFireRoom';

export interface Props {
  dispatch?: Function,
  children?: React.ReactNode,
  loading?: boolean,
  fireRoomTargetList?: {
    data: Array<any>,
    dataCnt: number
  },
  buttons?: Array<any>,
  dict?: object,
  id?: string
}
const ONE_PAGE_SIZE = 10;

@connect(({ unit_task_rules, loading }) => ({
  fireRoomTargetList: unit_task_rules.fireRoomTargetList,
  loading: loading.effects['unit_task_rules/queryFireRoomTargetPage']
}))
class FormDeviceMessageList extends Component<Props, any> {
  constructor(props) {
    super(props);
    this.state = {
      current: 1,
      index: 1,
      deviceRules: {
        data: [],
        dataCnt: 0
      },
      visible: false,
      id: ''
    };
    this.initCurrent = this.initCurrent.bind(this);
  }

  componentWillMount() {
    this.queryData();
  }

  queryData(offset = 1, size = ONE_PAGE_SIZE) {
    const { dispatch, id } = this.props;
    this.setState({
      id
    });
    dispatch({
      type: 'unit_task_rules/queryFireRoomTargetPage',
      payload: {
        pageNum: offset,
        pageSize: size,
        taskRuleId: id,
        targetTypeList: ['2']
      },
    });
  }

  initCurrent() {
    this.setState({
      current: 1
    })
  }

  render() {
    const { fireRoomTargetList = {data: [], dataCnt: 0 } } = this.props;
    const { data = [], dataCnt } = fireRoomTargetList;
    const ans = data && Array.isArray(data) ? data.map((item, index) => ({
        key: index,
        id: item.fireRoom ? item.fireRoom.id : '/',
        name: item.fireRoom ? item.fireRoom.name : '/',
        location: item.fireRoom ? item.fireRoom.location : '/',
        manager: item.fireRoom ? item.fireRoom.manager : '/',
        mobile: item.fireRoom ? item.fireRoom.mobile : '',
        telephone: item.fireRoom ? item.fireRoom.telephone : '',
        hostModel: item.fireRoom ? item.fireRoom.hostModel : ''
      })
    ) : [];
    const pagination = {
      total: dataCnt,
      showTotal: total => `共 ${total} 条`,
      showQuickJumper: true,
      pageSize: ONE_PAGE_SIZE,
      onChange: (current) => {
        this.setState({ current });
        this.queryData(current)
      },
    };
    const columns = [{
      title: '消控室名称',
      dataIndex: 'name',
    }, {
      title: '位置',
      dataIndex: 'location',
    }, {
      title: '责任人',
      dataIndex: 'manager',
    }, {
      title: '联系方式',
      dataIndex: 'mobile',
    }, {
      title: '消控室电话',
      dataIndex: 'telephone',
    }];
    return (
      <div style={{'width': '90%', 'margin': '20px auto 0'}}>
        {/* <SearchFireRoom current={ this.state.current } initCurrent={this.initCurrent} deviceId={this.state.id}/> */}
        <Table
          columns={columns}
          pagination={pagination}
          dataSource={ans}
          bordered
          loading={this.props.loading}
        />
      </div>
    );
  }
}

export default FormDeviceMessageList;
